// pages/cockpit/cockpit.js
import { getPatrolTaskPlanImportant } from '@/api/cockpitApi'

import * as echarts from '../../components/ec-canvas/echarts'
function initChart1(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);
  var dataList = [
    {
      value: 70,
      name: '待检查',
      itemStyle: {
        color: '#FF9900'
      }
    },
    {
      value: 120,
      name: '已检查',
      itemStyle: {
        color: '#00B42A'
      }
    },
    {
      value: 50,
      name: '已逾期',
      itemStyle: {
        color: '#F53F3F'
      }
    }
  ];
  var option = {
    // tooltip: {
    //   trigger: 'item'
    // },
    series: [
      {
        type: 'pie',
        silent: 'ture', // 点击图例 不放大 不产生动效
        center: ['50%', '50%'], //位置
        radius: ['55%', '100%'], //圈大小
        data: dataList,
        labelLine: {
          normal: {
            //线样式
            lineStyle: {
              color: '#CCCCCC'
            },
            length: 20,
            length2: 35
          }
        },
        label: {
          normal: {
            show: false,
            // 文字样式
            formatter: function (param) {
              return (
                '{a|' + param.name + '}\n' + '{a|' + param.value + '人' + '}'
              );
            },
            rich: {
              a: {
                color: '#666',
                fontSize: '14',
                lineHeight: '22'
              },
              b: {
                color: '#333',
                fontSize: '14',
                lineHeight: '22',
                fontWeight: '800'
              }
            }
          }
        }
      },
      {
        // 内圈
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['55%', '74%'],
        silent: true,
        itemStyle: {
          normal: {
            color: 'rgba(255, 255, 255,.5)',
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        data: [1]
      }
    ]
  };
  chart.setOption(option);
  return chart;
}

function initChart2(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);
  var percent = 0.65
  var option = {
    // backgroundColor: '#ecf0f5',
    title: {
      text: percent * 100 + '%',
      textStyle: {
        color: '#000',
        fontSize: 16
      },
      left: 'center',
      top: 'center'
    },
    angleAxis: {
      max: 100, // 满分
      clockwise: true, // 顺时针
      // 隐藏刻度线
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    radiusAxis: {
      type: 'category',
      // 隐藏刻度线
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    polar: {
      center: ['50%', '50%'],
      radius: '160%' // 图形大小 radius + '%'
    },
    barMaxWidth: 7, //圆环宽度
    series: [
      { // 圆环
        type: 'bar',
        silent: 'ture',
        data: [
          {
            name: '进度',
            value: percent * 100,
            itemStyle: {
              normal: {
                color: '#00b42a'
              }
            }
          }
        ],
        coordinateSystem: 'polar',
        roundCap: true,
        barGap: '-100%', // 两环重叠
        z: 2
      },
      { // 灰色环
        type: 'bar',
        silent: 'ture',
        data: [
          {
            value: 100,
            itemStyle: {
              color: '#ecf0f5',
            }
          }
        ],
        coordinateSystem: 'polar',
        roundCap: true,
        barGap: '-100%', // 两环重叠
        z: 1
      },

      // 带空心的小圆点
      {
        type: 'pie',
        radius: ['78%', '64%'], // endPointRadius
        silent: true,
        data: [
          {
            name: '',
            value: percent,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              color: 'rgba(0,0,0,0)'
            }
          },

          // 画中间的图标
          {
            name: '',
            value: 0,
            label: {
              position: 'inside',
              backgroundColor: '#fff',
              borderRadius: 12,
              padding: 2, // 可以控制圆的大小
              borderWidth: 1,
              borderColor: '#fff'
            }
          },
          {
            name: '',
            value: 1 - percent,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              color: 'rgba(255,255,255,0)'
            }
          }
        ]
      }
    ]
  };
  chart.setOption(option);
  return chart;
}

function initChart3(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);
  var dataList = [
    {
      value: 70,
      name: '网格巡查',
      itemStyle: {
        color: '#FF9900'
      }
    },
    {
      value: 120,
      name: '企业自查',
      itemStyle: {
        color: '#0C4DF9'
      }
    }
  ];
  var option = {
    // tooltip: {
    //   trigger: 'item'
    // },
    series: [
      {
        type: 'pie',
        silent: 'ture', // 点击图例 不放大 不产生动效
        center: ['50%', '50%'], //位置
        radius: ['55%', '100%'], //圈大小
        data: dataList,
        labelLine: {
          normal: {
            //线样式
            lineStyle: {
              color: '#CCCCCC'
            },
            length: 20,
            length2: 35
          }
        },
        label: {
          normal: {
            show: false,
            // 文字样式
            formatter: function (param) {
              return (
                '{a|' + param.name + '}\n' + '{a|' + param.value + '人' + '}'
              );
            },
            rich: {
              a: {
                color: '#666',
                fontSize: '14',
                lineHeight: '22'
              },
              b: {
                color: '#333',
                fontSize: '14',
                lineHeight: '22',
                fontWeight: '800'
              }
            }
          }
        }
      },
      {
        // 内圈
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['55%', '74%'],
        silent: true,
        itemStyle: {
          normal: {
            color: 'rgba(255, 255, 255,.5)',
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        data: [1]
      }
    ]
  };
  chart.setOption(option);
  return chart;
}


Page({
  /**
   * 页面的初始数据
   */
  data: {
    type: 'unit',
    ec: {
      onInit: initChart1
    },

    ec1: {
      onInit: initChart2
    },

    ec2: {
      onInit: initChart3
    },

    importantList: [],
  },

  onTabsClick(event) {
    console.log('点击tabs', event.detail.value);
    this.setData({ type: event.detail.value })
  },

  // 跳任务详情
  toTaskDetail(e) {
    console.log(e.currentTarget.dataset.objid);
    let objId = e.currentTarget.dataset.objid
    wx.navigateTo({
      url: `/pages/taskDetail/taskDetail?obj_id=${objId}`,
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 重点案件
    getPatrolTaskPlanImportant().then((res) => {
      console.log(res.data);
      this.setData({ importantList: res.data })
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        current: 2  //这个数字是当前页面在tabBar中list数组的索引
      })
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})